<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import useTable from '@/hooks/useTable'
import useModal from '@/hooks/useModal'
import { TableColumnData } from '@arco-design/web-vue'
import SelectAccount from '@/components/SelectModal/Account.vue'

const props = defineProps<{
  val: any[]
}>()
const emit = defineEmits(['change', 'update:val'])
const { store } = useModal()
const { formatColumns } = useTable()
const tableData = ref(props.val)
watch(
  () => props.val,
  n => {
    tableData.value = n
  },
  { deep: true }
)
watch(
  () => tableData.value,
  n => emit('update:val', n)
)
const columns = formatColumns([
  { title: '用户Id', dataIndex: 'id' },
  { title: '用户头像', dataIndex: 'avatar' },
  { title: '用户昵称', dataIndex: 'nickName', hideInSearch: false },
  { title: '手机号码', dataIndex: 'mobile', hideInSearch: false },
  {
    title: '操作',
    dataIndex: 'op',
    fixed: 'right',
    width: 100,
  },
]) as TableColumnData[]
</script>
<template>
  <a-space style="width: 100%" direction="vertical">
    <a-button type="text" @click="store.handleShow({})">添加</a-button>
    <a-table :columns="columns" :data="tableData" header-title="连续签到配置" :pagination="false" :bordered="{ cell: true }" :scroll="{ x: 500 }">
      <template #avatar="{ record }">
        <a-image :src="record.avatar" width="40" />
      </template>
      <template #op="{ record, rowIndex }">
        <a-button type="text" @click="tableData.splice(rowIndex, 1)">删除</a-button>
      </template>
    </a-table>
  </a-space>
  <SelectAccount v-if="store.show" v-model:show="store.show" v-model:list="tableData" type="checkbox" />
</template>
<style lang="less" scoped></style>
